<template>
  <el-card class="box-card" v-loading="loading">
    <template #header>
      <div class="card-header">
        <span>省份分数范围配置</span>
      </div>
    </template>
    <div class="box" v-loading="loading">
      <!-- 左侧动态菜单 -->
      <el-menu
        :default-active="activeMenuIndex"
        class="el-menu-vertical-demo"
        @select="handleMenuSelect"
      >
        <el-menu-item
          v-for="(item, index) in menuItems"
          :key="index"
          :index="item"
        >
          {{ item }}
        </el-menu-item>
      </el-menu>
      <!-- 右侧内容 -->
      <div class="editer-box">
        <JsonEditor @save-json="handleSaveJson" :languageDataList="dataList" />
      </div>
    </div>
  </el-card>
</template>
<script setup>
import JsonEditor from '@/components/JsonEditor/index.vue';
import { ElMessage } from 'element-plus';
import provincialScore from '@/modules';
import isArray from 'lodash';
const { provinceListApi, updataProvinceApi } = provincialScore;
import { ref, onMounted } from 'vue';
// 当前选中的菜单项的索引
const activeMenuIndex = ref('北京'); // 当前选中的菜单项的索引
const loading = ref(false);

const menuItems = ref([]);

const tableDataList = ref([]);

const dataList = ref([]);

let params = ref({
  id: '',
  scoreConfig: '',
});
// 处理左侧菜单选择
const handleMenuSelect = async (configName) => {
  activeMenuIndex.value = configName;
  const fliterDataItem = parseScoreConfig(tableDataList.value).find(
    (item) => item.provinceName == configName
  );
  dataList.value = fliterDataItem?.scoreConfig || [];
  params.value.id = fliterDataItem.id;
};

const handleSaveJson = async (json) => {
  params.value.scoreConfig = JSON.stringify(json);
  const data = await updataProvinceApi(params.value);
  if (data.code == 20000) {
    ElMessage({
      showClose: true,
      message: data.msg,
      type: 'success',
    });
  }
};
const getProvinceDataList = async () => {
  loading.value = true;
  const data = await provinceListApi();
  try {
    tableDataList.value = data.data;
    menuItems.value = parseScoreConfig(data.data).map(
      (item) => item.provinceName
    );
    if (isArrayWithLength(parseScoreConfig(data.data))) {
      dataList.value = parseScoreConfig(data.data)[0]?.scoreConfig ?? [];
      params.value.id = parseScoreConfig(data.data)[0].id;
    }
  } catch (err) {
    console.log('err:', err);
  } finally {
    loading.value = false;
  }
};
// 判断是否为数组和有长度
const isArrayWithLength = (value) => {
  return isArray(value) && value.length > 0;
};
// 解析数据
const parseScoreConfig = (data) => {
  return data.map((item) => {
    try {
      return {
        ...item,
        scoreConfig: JSON.parse(item.scoreConfig), // 解析 scoreConfig 字符串
      };
    } catch (err) {
      console.error('JSON 解析错误:', err);
      return { ...item, scoreConfig: [] }; // 解析失败时，返回空数组
    }
  });
};
onMounted(() => {
  getProvinceDataList();
});
</script>
<style scoped lang="scss">
.box-card {
  margin: 20px;

  .card-header {
    font-size: 20px;
    font-weight: 600;
    color: #1d2129;
    padding: 10px;
  }
}
.editer-box {
  height: calc(100vh - 360px);
}

.box {
  display: flex;
  gap: 20px;
}
/* 左右布局间距调整 */
.el-menu-vertical-demo {
  width: 200px;
  height: calc(100vh - 360px);
  overflow-y: auto;
  //   border-right: none !important;
}
.editer-box {
  width: 100%;
}
.custom-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid #ebeef5;
}
</style>
